<template>
  <div class="order_box">
    <!-- 顶部标题组件 -->
    <headerTitle>{{ msg }}</headerTitle>

    <!-- 商品 组件 -->
    <section class="goods_card">
      <orderCard
        :currentBuyGoods="currentBuyGoods"
        :colect="colect"
        :list="list"
        @changeNum="$emit('changeNum', $event)"
        @goodsPayState="$emit('goodsPayState', $event)"
      />
    </section>

    <section class="address_box">
      <div class="place">
        收货地址
        <div class="addBtn" @click="$router.push({ path: '/address' })">+</div>
      </div>
      <div class="info" v-show="this.list != ''">
        <div class="top">
          <div class="name">{{ this.list[0].name }}</div>
          <div class="tel">{{ this.list[0].tel }}</div>
          <span v-if="this.list[0].isDefault == true">默认</span>
        </div>
        <div class="bottom">
          <div class="address">{{ this.list[0].address }}</div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import orderCard from "../components/order/orderCard.vue";
import headerTitle from "../components/base/headerTitle.vue";

export default {
  props: ["currentBuyGoods", "changeAddress", "colect"],
  components: {
    headerTitle,
    orderCard,
  },
  data() {
    return {
      msg: "订单页面",
      goods: [],
      // currentGoods: [],
      list: [
        // {
        //   id: "1",
        //   name: "张三",
        //   tel: "13000000000",
        //   address: "浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室",
        //   isDefault: true,
        // },
      ],
    };
  },
  created() {
    this.goods = require("../../public/jSON/good");
    // this.getGoodFun(this.currentBuyGoods.id);
    this.list.push(this.changeAddress);
  },
  methods: {
    // getGoodFun(val) {
    //   let arr = [];
    //   for (let i = 0; i < this.goods.length; i++) {
    //     if (this.goods[i].id == val) {
    //       this.goods[i].num = this.currentBuyGoods.num;
    //       arr.push(this.goods[i]);
    //     }
    //   }
    //   this.currentGoods = arr;
    //   console.log(this.currentGoods);
    // },
  },
};
</script>

<style lang="less" scoped>
.goods_card {
  padding-top: 5px;
}
.address_box {
  // padding: 0px 10px;
  box-sizing: border-box;
  margin-top: 3px;
  .place {
    background-color: white;
    padding: 0px 10px;
    line-height: 2;
    color: rgba(0, 0, 0, 0.397);
    margin-bottom: 5px;
    position: relative;
    .addBtn {
      width: 26px;
      height: 26px;
      font-size: 25px;
      line-height: 26px;
      text-align: center;
      border: 1px solid rgba(136, 136, 136, 0.3);
      border-radius: 50%;
      position: absolute;
      right: 20px;
      top: 3px;
    }
  }
  .info {
    margin: 0px 10px;
    padding: 15px 20px;
    background-color: white;
    border-radius: 10px;
    border: 1px solid rgba(136, 136, 136, 0.3);
    .top {
      color: #232323;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .name {
        margin-right: 10px;
      }
      .tel {
        font-size: 15px;
      }
      span {
        display: inline-block;
        font-size: 12px;
        padding: 0px 3px;
        color: white;
        margin-left: 10px;
        background-color: red;
        border-radius: 8px;
      }
    }
    .bottom {
      color: #323233;
      font-size: 13px;
    }
  }
}
</style>